import React, { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom'

export default function Test4(props) {
    const [count, setCount] = useState(0);

    const isFirst = useRef(true);
    // useEffect 
    // 1、有两个参数,第一个是需要完成的副效应,第二个是产生副效应需要的依赖。
    // 2、第一个参数允许一个返回函数,用于完成副效应后需要做的事情
    // 3、不同的副效应应该写不同的useEffect,而不是写在一起
    // 4、useEffect初始化每次都会执行一次（类似vue的watch开启了immediate）,需要自己手动解决这个问题。后面的版本似乎有useUpdateEffect解决这个问题
    // 5、useEffect中的使用计时器的话,每次依赖改变都会创建一个计时器,需要清除掉

    // 相当于created、update
    // useEffect(()=>{
    //     console.log('1.第二个参数没有传,所以created、update时都会执行');
    // })

    // 相当于created、update、destroy
    // useEffect(()=>{
    //     console.log('2.第二个参数没有传,所以created、update时都会执行');
    //     return ()=>{
    //         console.log('2.第二个参数没有传,所以destroy时都会执行');
    //     }
    // })

    // 相当于created
    // useEffect(()=>{
    //     console.log('3.第二个参数没有依赖,所以created执行一次');
    // }, [])

    // 相当于created、destroy
    // useEffect(()=>{
    //     console.log('4.第二个参数没有依赖,所以created执行一次');
    //     return ()=>{
    //         console.log('4.第二个参数没有依赖,所以destroy时会执行');
    //     }
    // }, [])

    // 相当于开启了immediate的watch
    // useEffect(()=>{
    //     console.log('5.有参数二,所以count改变时时都会执行');
    // }, [count])

    // 相当于没有开启immediate的watch
    useEffect(()=>{
        // 初始化不执行,之后每次count改变就执行
        if(!isFirst.current){
            console.log('5.有参数二,所以count改变时时都会执行');
        }else{
            isFirst.current = false;
        };
    }, [count])

    // useEffect中写计时器,执行完成一定要清除掉,不然每次依赖改变都会重新创建计时器,导致内存泄漏
    // useEffect(()=>{
    //     const timer = setInterval(()=>{
    //         console.log('count');
    //     },1000)
    //     return ()=>{
    //         clearInterval(timer);
    //     }
    // })


    const navigate = useNavigate();

    return <div>
        <div className='demo_box'>
            <p>计数: {count}</p>
            <p>
                <button onClick={()=> setCount( count+1 )}>计数+1</button>
                <button onClick={()=> setCount( count-1 )}>计数-1</button>
            </p>
            <p>
                <button onClick={()=>{
                    // 通过navigate() 跳转页面，参数可以放在state里。
                    navigate('/test3', { state: { type: 'any'}});
                }}>返回test3</button>
            </p>
        </div>
    </div>
};


// react-router-dom6.0  路由跳转及传参 https://www.cnblogs.com/Regina-wisdom/p/15479240.html
